<template>
	<view class="container">
		<view class="content">
			<view class="time">
				<text>支付剩余时间：</text>
				<uni-countdown :show-day="false" @timeup="timeup()" color="#EB8D47" splitor-color="#EB8D47" :hour="0"
					:minute="15" :second="0"></uni-countdown>
			</view>
			<view class="price">
				¥ <text>{{orderInfo.order.price}}</text>
			</view>
			<view class="jigou">
				{{orderInfo.order.shop_name}}
			</view>
		</view>
		<view class="payType">
			<radio-group @change="radioChange">
				<view class="payTypeItem">
					<label class="payTypeCell" v-for="(item, index) in items" :key="item.value">
						<view class="intro">
							<image :src="item.icon" mode=""></image>
							<text>{{item.name}}</text>
						</view>
						<view class="btn">
							<radio :value="item.value" :checked="item.value === current" />
						</view>
					</label>
				</view>
			</radio-group>
		</view>
		<view class="pay" @click="pay()">
			立即支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: "",
				order: "",
				orderInfo: "",
				items: [{
						value: '0',
						name: '微信支付',
						icon:require('../../static/icon/weixin.png'),
					},
					{
						value: '1',
						name: '余额支付',
						icon:require('../../static/icon/yue.png'),
					}
				],
				current: '0'
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			//打印出上个页面传递的参数。
			this.order = option.order;
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getInfo()
				},
				fail() {
					uni.redirectTo({
						url: '../login/auth'
					});
				}
			});
		},
		methods: {
			radioChange(evt) {
				console.log(evt)
				this.current = evt.detail.value;
			},
			pay() {
				let param = {
					"order_no": this.order,
					'token': this.token,
				};
				if(this.current==='0'){
					param.openid = uni.getStorageSync('openid');
					param.pay_type = 'wechat';
				}else{
					param.pay_type = 'salary';
				}
				
				uni.request({
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/requestPayment',
					method: 'POST',
					data: param,
					success: res => {
						if (res && res.data) {
							if(this.current==='0'){
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function(res) {
										console.log('success:' + JSON.stringify(res));
										uni.navigateTo({
											url: "./success"
										})
									},
									fail: function(err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}else{
								if(res.data.code===1){
									uni.navigateTo({
										url: "./success"
									})
								}else{
									uni.showToast({
										title:res.data.msg,
										icon:'none'
									})
								}
							}
							
						} else {
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none',
							});
						}

					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						console.log(res)
					}
				});

			},
			timeup() { //倒计时时间到触发事件
				console.log(13)
			},
			getInfo() {
				uni.request({
					url: 'https://mx.acktechnologies.com.cn/api/wxapp/apply/paymentInfo',
					method: 'GET',
					data: {
						'token': this.token,
						'order_no': this.order,
					},
					success: res => {
						console.log(res)
						if (res && res.data && res.data.code === 1) {
							this.orderInfo = res.data.data;
						}
					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						console.log(res)
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		overflow: hidden;
	}

	.time {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 24rpx;

		text {
			font-size: 15px;
			font-family: SourceHanSansCN-Normal, SourceHanSansCN;
			font-weight: 400;
			color: #EB8D47;
		}
	}

	.price {
		font-size: 17px;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #333333;
		text-align: center;

		text {
			font-size: 30px;
			margin-left: 10rpx;
		}
	}

	.jigou {
		font-size: 13px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #999999;
		margin-top: 20rpx;
		text-align: center;
	}

	.content {
		width: 670rpx;
		height: 254rpx;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 16rpx;
		margin: 32rpx auto;
		overflow: hidden;
	}

	.payType {
		width: 335px;
		margin: 7px auto;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px #E9EBF6;
		border-radius: 8px;
		padding: 24px 21px;
		box-sizing: border-box;
	}
	.payTypeCell{
		display: flex;
		justify-content: space-between;
		.intro{
			display: flex;
			align-items: center;
			image{
				width: 22px;
				height: 22px;
			}
			text{
				margin-left: 10px;
			}
		}
	}
	.payTypeCell:nth-child(1){
		margin-bottom: 24px;
	}
	.pay {
		width: 670rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 18px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		background: linear-gradient(90deg, #FF5C2E 0%, #FD5629 100%);
		border-radius: 48rpx;
		margin: 308rpx auto 0 auto;
	}
</style>
